<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>儿子1</li>
        <li>儿子2</li>
        <li>儿子3</li>
        <li>儿子4</li>
        <li>儿子5</li>
    </ul>
    <script>
        var ul = document.querySelector("ul")
        //获取爹下面的所有的儿子
        // console.log(ul.children);
        //获取爹的第一个儿子
        // console.log(ul.firstElementChild);
        //获取爹的最后一个儿子
        // console.log(ul.lastElementChild);

        var li3 = document.querySelector("li:nth-child(3)")
        //获取儿子的爹
        // console.log(li3.parentElement);


        //兄弟
        //哥哥
        console.log(li3.previousElementSibling);
        //弟弟
        console.log(li3.nextElementSibling);
    </script>
</body>
</html>